<!DOCTYPE html>
<html>

<head>
    <title>ChatAD</title>
    <script src="static/js/jquery-3.6.0.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/marked.min.js"></script>
    <script src="static/js/prism.min.js"></script>
    <script src="static/js/prism-markup.min.js"></script>
    <script src="static/js/prism-javascript.min.js"></script>
    <script src="static/js/prism-line-numbers.min.js"></script>
    <script src="static/js/prism-copy-to-clipboard.min.js"></script>
    <script src="static/js/clipboard.min.js"></script>
    <script src="static/js/lodash.min.js"></script>
    <script src="static/js/highlight.min.js"></script>
    <script src="static/js/pptxgen.bundle.js"></script>
    <script src="static/js/docmee-ui-sdk-iframe.min.js" defer></script>
    <script src="static/js/html-docx.js"></script>
    <script src="static/js/html2canvas.min.js"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/prism-okaidia.min.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/monokai-sublime.min.css">
    <link href="static/css/css2.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Open Sans', Arial, sans-serif;
            /* 新背景图片 */
            background-image: url('static/figures/index_bg2.jpg');
            background-size: cover; /* 覆盖整个页面 */
            background-position: center center; /* 使图像居中 */
            background-repeat: no-repeat; /* 不重复图片 */
            background-attachment: fixed; /* 可选：在滚动时固定背景 */
            
            color: #333333; /* 调整默认文本颜色以适应可能更亮的背景 */
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        .header-banner {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 600px; /* 缩小最大宽度 */
            margin: 30px auto; /* 上下边距并水平居中 */
            padding: 40px; /* 增加内边距以更好地显示渐变 */
            background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.65) 0%, transparent 60%); /* 更明显的白色渐变 */
            border-radius: 15px; /* 调整圆角 */
        }
        #title-image {
            display: block;
            max-width: 100%;
            height: auto;
            /* 可根据需要添加其他样式，例如轻微的阴影 */
            /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
        }
        .custom-text-block {
            background-color: rgba(255, 255, 255, 0.7); /* 增加透明度以提高图像的可读性 */
            padding: 15px 20px;
            border-radius: 8px; 
            margin: 25px auto; 
            text-align: center;
            font-size: 1.05em; 
            color: #2c3e50; /* 在半透明背景上更好的对比度 */
            width: 80%;
            max-width: 800px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .visualizer-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px auto;
            width: 80%;
            max-width: 800px;
        }

        .visualizer-box {
            width: 45%; /* 调整以适应两个盒子 */
            text-align: center;
            margin: 0 10px;
        }
        .visualizer-box button {
            padding: 10px 15px;
            font-size: 1em;
        }

        .visualizer-info {
            text-align: center;
            font-size: 14px;
            color: #666;
            font-weight: 600;
            margin-top: 5px;
        }
        
        .main-content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 0 20px; /* 添加一些水平填充 */
            box-sizing: border-box;
        }

        /* 用于聊天输入和主要操作按钮的容器 */
        .chat-interface-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px; /* 保持整体圆角 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1100px; /* << INCREASED WIDTH */
            margin-bottom: 0; /* 明确设置为0 */
            border-bottom-left-radius: 0; /* 当DocMee显示时扁平化底部 */
            border-bottom-right-radius: 0; /* 当DocMee显示时扁平化底部 */
        }

        .chat-form {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: flex-start;
        }
        .chat-form .form-group {
            margin-bottom: 0; /* 从bootstrap中删除默认的底部边距 */
        }
        .chat-form .form-group:first-child {
            flex: 1;
        }
        .chat-form .form-group:last-child {
            flex: 3;
        }
        .chat-form .form-group label {
            font-weight: 600; /* 粗体，如请求 */
            display: block; /* 确保标签需要时占据全宽 */
            margin-bottom: 5px; /* 标签和输入之间的空间 */
            color: #333333; /* 确保良好的对比度 */
        }

        .action-buttons-container {
            display: flex;
            justify-content: space-between; /* 与空间对齐 */
            align-items: center; /* 垂直对齐 */
            margin-top: 15px;
            flex-wrap: wrap; /* 允许按钮在小屏幕上换行 */
            gap: 10px;
        }
        .left-actions {
            display: flex;
            gap: 10px;
        }
        .right-actions {
            display: flex;
            gap: 10px;
        }
        
        /* 主要操作按钮和聊天历史记录切换的样式 */
        #sendMessageButton, #showDocmeeEditorBtn, #toggleChatHistoryBtn, #generateSuggestionsBtn, #downloadButton {
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 18px; /* 稍微大一点的填充 */
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 0.95em;
        }
        
        #sendMessageButton:disabled, #showDocmeeEditorBtn:disabled, #generateSuggestionsBtn:disabled, #downloadButton:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        
        #sendMessageButton:hover:not(:disabled), 
        #showDocmeeEditorBtn:hover:not(:disabled),
        #generateSuggestionsBtn:hover:not(:disabled),
        #downloadButton:hover:not(:disabled) {
            background-color: #357abd;
        }
        
        #taskStatus {
            font-size: 0.9em;
            color: #333;
            margin-top: 5px; /* 状态消息上面的空间 */
            flex-basis: 100%; /* 如果按钮换行，允许状态占据全宽 */
            text-align: left;
        }

        /* 用于实际聊天消息的容器（日志显示） */
        #chatMessagesArea {
            background-color: #ffffff; /* 消息的白色背景 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            width: 100%;
            max-width: 1100px; /* << INCREASED WIDTH */
            margin-bottom: 20px;
            max-height: 600px; /* 最大高度用于滚动 */
            overflow-y: auto;   /* 如果内容超过最大高度，滚动 */
        }

         .hidden {
            display: none !important;
        }
        
        /* DocMee容器的样式 */
        #docmeeCreatorContainer { /* 现在这是一个顶级容器 */
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
            width: 100%; 
            max-width: 1100px; /* << INCREASED WIDTH */
            margin: 0 auto 20px auto; 
            border-top-left-radius: 0; 
            border-top-right-radius: 0; 
            border-bottom-left-radius: 8px; 
            border-bottom-right-radius: 8px; 
            border-top: 1px solid #eee; 
        }
        #docmeeCreatorContainer h2 {
             color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 0;
        }
        #docmee-iframe-container {
            width: 100%;
            height: 700px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .loading, .error-message { /* DocMee加载/错误状态的样式 */
            text-align: center;
            font-size: 1.2em;
            padding: 20px;
        }
        .suggestions-container {
            display: flex;
            justify-content: space-around; /* 分布空间在项目周围 */
            align-items: flex-start; /* 对齐项目到顶部 */
            flex-wrap: wrap; /* 允许在小屏幕上换行 */
            width: 100%;
            max-width: 1200px; /* 增加最大宽度以容纳更宽的内容 */
            margin: 25px auto; /* 居中容器 */
            gap: 25px; /* 盒子之间的空间 */
        }
        .suggestion-box {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: calc(50% - 12.5px); /* 每个盒子占据一半宽度，减去间隙 */
            box-sizing: border-box; /* 包括填充和边框在元素的总宽度和高度中 */
            position: relative; /* 添加相对位置以定位导出按钮 */
        }
        .suggestion-box h3 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 0;
            margin-bottom: 15px;
            text-align: center;
        }
        .export-buttons {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            gap: 5px;
        }
        .export-btn {
            padding: 5px 10px;
            font-size: 0.8em;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .export-word-btn {
             background-color: #007bff;
        }
        .export-word-btn:hover {
            background-color: #0056b3;
        }
        .export-img-btn {
            background-color: #28a745;
        }
        .export-img-btn:hover {
            background-color: #218838;
        }
        .suggestion-box table {
            width: 100%;
        }
        .suggestion-box table th, .suggestion-box table td {
            padding: 8px;
            line-height: 1.6;
            font-size: 0.9em;
            /* 确保垂直对齐是顶部，如果需要的话 */
            vertical-align: top; 
        }
        .suggestion-box table th {
            background-color: #f2f2f2;
            text-align: left; /* 默认情况下，将标题文本对齐到左侧 */
        }

        /* 专门针对"广告投放建议书"表格进行th样式设置，如果需要的话 */
        /* 假设它的tbody有id="placementRecommendationsTableBody" */
        /* 我们可以针对它的thead th */
        #placementRecommendationsTableBody > thead > tr > th:nth-child(1) { /* 针对第一个标题："主类别" */
            min-width: 100px; /* 根据需要调整 */
            white-space: nowrap; /* 防止此特定标题换行 */
        }
        #placementRecommendationsTableBody > thead > tr > th:nth-child(2) { /* 针对第二个标题："子类别/方案" */
            min-width: 150px; /* 根据需要调整 */
        }
        #placementRecommendationsTableBody > thead > tr > th:nth-child(3) { /* 针对第三个标题："详情" */
            /* 让这个占据剩余宽度或设置更大的最小宽度 */
        }

        /* 针对较小屏幕的响应式调整 */
        @media (max-width: 768px) {
            .suggestion-box {
                width: 100%; /* 在小屏幕上全宽 */
                margin-bottom: 20px; /* 在小屏幕上添加盒子之间的空间 */
            }
            .suggestions-container {
                flex-direction: column; /* 垂直堆叠盒子 */
                align-items: center; /* 在小屏幕上居中对齐盒子 */
            }
        }

        /* 主内容卡的共享样式 */
        .content-card {
            background-color: #ffffff;
            padding: 25px;
            border-radius: 12px; /* 更柔和，更大的圆角 */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* 更柔和，更扩散的阴影 */
            width: 100%;
            border: 1px solid rgba(0,0,0,0.05);
        }

        #chatMessagesArea.hidden + #docmeeCreatorContainer { /* 如果聊天消息隐藏，DocMee连接到接口 */
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin-top: -1px;
        }
        #chatMessagesArea:not(.hidden) + #docmeeCreatorContainer { /* 如果聊天消息显示，DocMee是分开的 */
             border-top-left-radius: 12px;
             border-top-right-radius: 12px;
             margin-top: 25px; /* 标准边距，当它不直接连接时 */
        }

        #docmeeCreatorContainer {
            /* 扩展.content-card */
            max-width: 1100px; 
            /* 边距和圆角现在基于chatMessagesArea的可见性动态变化 */
        }
        #docmeeCreatorContainer h2,
        .suggestion-box h3 {
            color: #333;
            font-weight: 600;
            border-bottom: 2px solid #5D3FD3; /* 恢复到早期的紫色，或选择一个新的强调色 */
            padding-bottom: 12px;
            margin-top: 0;
            margin-bottom: 20px;
        }

        .suggestion-box ul li strong {
            color: #2c3e50; /* 更深的颜色用于强文本 */
        }

    </style>
</head>

<body>
    <!-- 1. 顶部标题区域 -->
    <div class="header-banner">
        <img src="static/figures/title.png" alt="ChatAD Title" id="title-image">
    </div>

    <!-- 2. 可视化工具链接区域 -->
    <div class="visualizer-container">
        <div class="visualizer-box">
            <a href="static/chain_visualizer.html"><button>ChatChain可视化</button></a>
            <p class="visualizer-info">探索ChatChain的各个阶段和设置</p>
        </div>
        <div class="visualizer-box">
            <a href="static/replay.html"><button>重放可视化</button></a>
            <p class="visualizer-info">重放其他ChatAD生成对话</p>
        </div>
    </div>

    <!-- 3. 主内容包装器 -->
    <div class="main-content-wrapper">
        <div class="custom-text-block">
            与AI协作生成营销方案，并在线编辑和导出PPT。
        </div>

        <!-- 4. 核心交互区域：用户输入与控制按钮 -->
        <div class="chat-interface-container content-card" id="chatInterfaceContainer">
            <!-- 4.1. 用户输入表单 -->
            <div class="chat-form" style="background-color: #83e9d0;">
                <div class="form-group">
                    <label for="textInput">项目名称 (例如: 杭州网易):</label>
                    <input type="text" class="form-control" id="textInput" placeholder="请输入简短的项目名称">
                </div>
                <div class="form-group">
                    <label for="roleInput">任务 (例如: 推广该公司：杭州网易雷火科技有限公司，旗下的游戏产品包括 无尽的拉格朗日, 明日之后-生存创造, 漫威终极逆转):</label>
                    <textarea class="form-control" id="roleInput" rows="4" placeholder="请输入详细的任务描述..."></textarea>
                </div>
            </div>
            <!-- 4.2. 控制按钮容器 -->
            <div class="action-buttons-container">
                <div class="left-actions">
                    <button id="toggleChatHistoryBtn" class="btn btn-secondary">显示/隐藏聊天记录</button>
                </div>
                <div class="right-actions">
                    <button type="button" class="btn btn-primary" id="sendMessageButton">开始生成方案</button>
                    <button type="button" class="btn btn-primary" id="generateSuggestionsBtn" disabled>生成建议案和投放书</button>
                    <button type="button" class="btn btn-info" id="showDocmeeEditorBtn" disabled>创建/编辑PPT</button>
                    <button type="button" id="downloadButton" class="btn btn-primary" disabled>下载项目文件</button>
                </div>
            </div>
            <!-- 4.3. 任务状态显示区域 -->
            <div id="taskStatus" style="margin-top: 10px;"></div>
        </div>

        <!-- 5. 聊天记录显示区域 (初始隐藏) -->
        <div id="chatMessagesArea" class="hidden content-card"> 
            <!-- 由main.js动态填充系统和用户的消息 -->
        </div>
    </div> 

    <!-- 6. Docmee PPT在线编辑器容器 (初始隐藏) -->
    <div class="hidden content-card" id="docmeeCreatorContainer">
        <h2>创建/编辑 PPT</h2>
        <div id="docmee-iframe-container">
            <!-- DocMee iframe 将由JavaScript动态嵌入此处 -->
        </div>
        <div id="docmeeLoadingMessage" class="loading hidden" style="margin-top: 15px;">正在加载PPT编辑器...</div>
        <div id="docmeeErrorMessage" class="error-message hidden" style="margin-top: 15px;"></div>
    </div>

    <!-- 7. 建议案展示容器 (初始隐藏) -->
    <div class="suggestions-container hidden">
        <!-- 7.1. 广告拍摄建议案 -->
        <div class="suggestion-box content-card">
            <div class="export-buttons">
                <button class="export-btn export-word-btn">导出Word</button>
                <button class="export-btn export-img-btn">导出图片</button>
            </div>
            <h3>广告拍摄建议案</h3>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>类别</th>
                        <th>建议</th>
                    </tr>
                </thead>
                <tbody id="shootingSuggestionsTableBody">
                    <!-- 内容将由JavaScript动态注入 -->
                </tbody>
            </table>
        </div>
        <!-- 7.2. 广告投放建议书 -->
        <div class="suggestion-box content-card">
            <div class="export-buttons">
                <button class="export-btn export-word-btn">导出Word</button>
                <button class="export-btn export-img-btn">导出图片</button>
            </div>
            <h3>广告投放建议书</h3>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>主类别</th>
                        <th>子类别/方案</th>
                        <th>详情</th>
                    </tr>
                </thead>
                <tbody id="placementRecommendationsTableBody">
                    <!-- 内容将由JavaScript动态注入 -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- ======================================================================================= -->
    <!--                                  核心 JAVASCRIPT 逻辑                                 -->
    <!-- ======================================================================================= -->
    <script>
        // -- 1. 获取页面上的关键DOM元素 --
        // 这是所有交互的基础
        const docmeeCreatorContainer = document.getElementById('docmeeCreatorContainer');
        const docmeeIframeContainer = document.getElementById('docmee-iframe-container');
        const docmeeLoadingMessage = document.getElementById('docmeeLoadingMessage');
        const docmeeErrorMessage = document.getElementById('docmeeErrorMessage');
        const showDocmeeEditorBtn = document.getElementById('showDocmeeEditorBtn');
        const chatMessagesArea = document.getElementById('chatMessagesArea');
        const toggleChatHistoryBtn = document.getElementById('toggleChatHistoryBtn');
        const taskStatusElement = document.getElementById('taskStatus'); 
        const generateSuggestionsBtn = document.getElementById('generateSuggestionsBtn');
        const suggestionsContainer = document.querySelector('.suggestions-container');

        // -- 2. 初始化页面UI状态 --
        // 确保在页面加载时，非必要的模块（如聊天记录、PPT编辑器、建议案）都被隐藏
        if (chatMessagesArea) chatMessagesArea.classList.add('hidden');
        if (toggleChatHistoryBtn) toggleChatHistoryBtn.textContent = "显示聊天记录";
        if(docmeeCreatorContainer) docmeeCreatorContainer.classList.add('hidden');
        if (suggestionsContainer && !suggestionsContainer.classList.contains('hidden')) {
            suggestionsContainer.classList.add('hidden');
        }

        // -- 3. 【核心事件监听】处理"创建/编辑PPT"按钮点击 --
        if (showDocmeeEditorBtn) {
            showDocmeeEditorBtn.onclick = async function() {
                if(taskStatusElement) taskStatusElement.textContent = '正在准备PPT编辑器...'; 
                
                // 显示PPT编辑器容器
                if (docmeeCreatorContainer) {
                    docmeeCreatorContainer.classList.remove('hidden');
                }

                try {
                    // 步骤1: [AJAX] 调用后端API，获取用于生成PPT的最新对话内容
                    const response = await fetch('/api/get_latest_ppt_text_content');
                    if (!response.ok) {
                        let errorText = `获取PPT内容失败: ${response.status}`;
                        try {
                            const errorData = await response.json();
                            errorText = errorData.error || errorData.details || errorText;
                        } catch (e) { /* response not json */ }
                        throw new Error(errorText);
                    }
                    const data = await response.json();

                    // 步骤2: 根据API返回结果，初始化Docmee编辑器
                    if (data.ppt_content) {
                        if(taskStatusElement) taskStatusElement.textContent = '已获取PPT内容，正在加载编辑器。';
                        // 将获取到的文本内容传递给编辑器进行初始化
                        initDocmeeUI(data.ppt_content); 
                    } else {
                        if(taskStatusElement) taskStatusElement.textContent = '未能从日志中提取有效的PPT内容。将使用空白编辑器。';
                        // 如果没有内容，则初始化一个空白编辑器
                        initDocmeeUI(""); 
                    }
                } catch (error) {
                    console.error("获取PPT文本内容失败:", error);
                    if(taskStatusElement) taskStatusElement.textContent = `无法加载PPT内容到编辑器: ${error.message}`;
                    initDocmeeUI(""); 
                }
            };
        }
        
        /**
         * @function initDocmeeUI
         * @description 初始化Docmee在线PPT编辑器。
         * @param {string} pptTextContent - 从后端获取的、用于生成PPT的原始文本内容。
         */
        function initDocmeeUI(pptTextContent = '') { 
            if (!docmeeCreatorContainer || !docmeeIframeContainer || !docmeeLoadingMessage || !docmeeErrorMessage) {
                console.error("One or more DocMee elements are missing in initDocmeeUI.");
                if(taskStatusElement) taskStatusElement.textContent = "前端元素缺失，无法加载DocMee编辑器。";
                return;
            }
            
            // 显示加载动画，清空旧的iframe
            docmeeCreatorContainer.classList.remove('hidden');
            docmeeLoadingMessage.classList.remove('hidden');
            docmeeErrorMessage.classList.add('hidden');
            docmeeIframeContainer.innerHTML = ''; 

            // ** 第三方SDK集成关键点 **
            const userProvidedToken = "ak_R_1WCJ3T5TFETohWx7"; // 这是使用Docmee服务所需的安全令牌
 
            // 检查DocmeeUI的SDK是否已成功加载
            if (typeof DocmeeUI === 'undefined') {
                docmeeErrorMessage.textContent = "错误：PPTSDK (DocmeeUI) 未能正确加载。请确保 js/docmee-ui-sdk-iframe.min.js 文件存在且已正确引入。";
                docmeeErrorMessage.classList.remove('hidden');
                docmeeLoadingMessage.classList.add('hidden');
                docmeeIframeContainer.innerHTML = '<p style="text-align:center; padding: 20px; color: red;">SDK加载失败，请检查文件路径和引入方式。</p>';
                return;
            }
            
            // 检查Token是否已配置
            if (!userProvidedToken || userProvidedToken === "sk_YOUR_DOCMEE_TOKEN_HERE" || !(userProvidedToken.startsWith("sk_") || userProvidedToken.startsWith("ak_"))) {
                docmeeErrorMessage.textContent = "错误：无效或未配置PPTAPI Token。请在 index.html 文件中找到 userProvidedToken 常量并设置您的有效Token。";
                docmeeErrorMessage.classList.remove('hidden');
                docmeeLoadingMessage.classList.add('hidden');
                docmeeIframeContainer.innerHTML = '<p style="text-align:center; padding: 20px; color: red;">请配置有效的PPTAPI Token以加载编辑器。</p>';
                return;
            }

            docmeeLoadingMessage.classList.remove('hidden');
            docmeeErrorMessage.classList.add('hidden');
            docmeeIframeContainer.innerHTML = ''; 

            try {
                const docmeeInstance = new DocmeeUI({
                    container: docmeeIframeContainer, // 指定iframe的容器
                    token: userProvidedToken,        // 传入安全令牌
                    page: 'creator',                 // 指定功能为"创建器"
                    creatorData: {
                        text: pptTextContent,        // 【核心】将对话文本内容传给SDK
                        createNow: true              // 指示SDK立即开始生成
                    },
                    creatorType: 6,                  // 指定生成类型
                    onMessage: function(message) {   // 【核心】设置回调函数，处理从iframe内部发来的消息
                        console.log('DocMeeUI Message:', message);
                        if (message.type === 'error') {
                            console.error('DocMeeUI Error:', message.data);
                            docmeeErrorMessage.textContent = `PPT编辑器报告错误: ${message.data?.message || JSON.stringify(message.data)}`;
                            docmeeErrorMessage.classList.remove('hidden');
                        }
                        if (message.type === 'CLOSE_EDITOR') {
                             // 处理关闭编辑器的事件
                             if(docmeeCreatorContainer) docmeeCreatorContainer.classList.add('hidden');
                             if(taskStatusElement) taskStatusElement.textContent = 'PPT编辑器已关闭。';
                        }
                    }
                });
                docmeeLoadingMessage.classList.add('hidden'); // 成功初始化后隐藏加载动画
            } catch (e) {
                console.error('初始化PPTUI失败:', e);
                docmeeErrorMessage.textContent = `初始化PPTUI失败: ${e.message}. 请检查浏览器控制台获取详细错误。`;
                docmeeErrorMessage.classList.remove('hidden');
                docmeeLoadingMessage.classList.add('hidden');
                docmeeIframeContainer.innerHTML = '<p style="text-align:center; padding: 20px; color: red;">PPT编辑器加载失败，请检查控制台日志。</p>';
            }
        }

        // -- 4. 【核心事件监听】处理"生成建议案和投放书"按钮点击 --
        if (generateSuggestionsBtn && suggestionsContainer) {
            generateSuggestionsBtn.onclick = async function() {
                if (taskStatusElement) taskStatusElement.textContent = '正在从最新日志中提取建议案和投放书...';
                generateSuggestionsBtn.disabled = true;

                try {
                    // [AJAX] 调用后端API，获取解析好的建议案JSON数据
                    const response = await fetch('/api/get_latest_suggestions');
                    if (!response.ok) {
                        let errorText = `提取建议失败: ${response.status}`;
                        try {
                            const errorData = await response.json();
                            errorText = errorData.error || errorData.details || errorText;
                        } catch (e) { /* response not json */ }
                        throw new Error(errorText);
                    }
                    const data = await response.json();

                    // 使用获取到的数据，填充两个建议案表格
                    populateShootingSuggestionsTable(data.shooting_suggestions);
                    populatePlacementRecommendationsTable(data.placement_recommendations);

                    // 显示建议案容器
                    suggestionsContainer.classList.remove('hidden');
                    if (taskStatusElement) taskStatusElement.textContent = `建议已加载 (来自: ${data.source_log_file})。`;

                } catch (error) {
                    console.error("提取建议内容失败:", error);
                    if (taskStatusElement) taskStatusElement.textContent = `无法加载建议: ${error.message}`;
                    // 如果发生错误，清空表格
                    document.getElementById('shootingSuggestionsTableBody').innerHTML = '';
                    document.getElementById('placementRecommendationsTableBody').innerHTML = '';
                } finally {
                    generateSuggestionsBtn.disabled = false;
                }
            };
        }

        /**
         * @function populateShootingSuggestionsTable
         * @description 将"广告拍摄建议"的JSON数据动态填充到HTML表格中。
         * @param {Array<Object>} suggestions - 包含建议案数据的对象数组。
         */
        function populateShootingSuggestionsTable(suggestions) {
            const tableBody = document.getElementById('shootingSuggestionsTableBody');
            tableBody.innerHTML = ''; // 清空旧数据
            if (suggestions && suggestions.length > 0) {
                // 遍历数据，为每一条建议创建一个表格行(tr)和单元格(td)
                suggestions.forEach(item => {
                    const row = tableBody.insertRow();
                    const cellCategory = row.insertCell();
                    const cellDetails = row.insertCell();
                    cellCategory.textContent = item.category || 'N/A';
                    cellDetails.innerHTML = item.details ? String(item.details).replace(/\\n/g, '<br>') : 'N/A';
                });
            } else {
                const row = tableBody.insertRow();
                const cell = row.insertCell();
                cell.colSpan = 2;
                cell.textContent = '未能加载广告拍摄建议案内容。';
                cell.style.textAlign = 'center';
            }
        }

        /**
         * @function populatePlacementRecommendationsTable
         * @description 将"广告投放建议书"的复杂JSON数据动态填充到HTML表格中。
         * @param {Object} recommendations - 包含多层嵌套建议书数据的对象。
         */
        function populatePlacementRecommendationsTable(recommendations) {
            const tableBody = document.getElementById('placementRecommendationsTableBody');
            tableBody.innerHTML = ''; // 清空旧数据

            // 处理包含多层嵌套的数据结构，生成带标题和子项目的表格
            if (recommendations && 
                ((recommendations.schemes && recommendations.schemes.length > 0) || 
                 (recommendations.general_sections && recommendations.general_sections.length > 0))) {

                // 渲染方案
                if (recommendations.schemes && recommendations.schemes.length > 0) {
                    recommendations.schemes.forEach(scheme => {
                        // --- 方案标题行 ---
                        const schemeHeaderRow = tableBody.insertRow();
                        const cellSchemeMainTitle = schemeHeaderRow.insertCell();
                        cellSchemeMainTitle.colSpan = 3; // 跨所有三列
                        cellSchemeMainTitle.innerHTML = `<strong>${scheme.title || '方案'}</strong>`;
                        cellSchemeMainTitle.style.backgroundColor = '#e9ecef'; 
                        cellSchemeMainTitle.style.textAlign = 'left';
                        cellSchemeMainTitle.style.paddingLeft = '5px';

                        // --- 方案项目（子类别及其详细信息） ---
                        if (scheme.items && scheme.items.length > 0) {
                            scheme.items.forEach(item => { // item 是一个对象 {sub_title: "...", details: "..."}
                                const itemRow = tableBody.insertRow();
                                
                                // 第 1 栏：主类别（空格以与方案标题行对齐）
                                const cellMainCategorySpacer = itemRow.insertCell();
                                cellMainCategorySpacer.textContent = ''; 

                                // 第 2 栏：子类别/项目标题
                                const cellItemSubTitle = itemRow.insertCell();
                                cellItemSubTitle.textContent = item.sub_title || 'N/A';
                                cellItemSubTitle.style.fontWeight = 'bold';
                                cellItemSubTitle.style.verticalAlign = 'top';

                                // 第 3 栏：详细信息
                                const cellItemDetails = itemRow.insertCell();
                                cellItemDetails.innerHTML = item.details ? String(item.details).replace(/\\n/g, '<br>') : '无详细信息';
                            });
                        } else {
                            // 如果一个方案没有条目
                            const noItemRow = tableBody.insertRow();
                            const cellSpacer1 = noItemRow.insertCell(); cellSpacer1.textContent = '';
                            const cellNoItems = noItemRow.insertCell();
                            cellNoItems.colSpan = 2; // 剩余两列跨度
                            cellNoItems.textContent = '此方案下无详细条目。';
                            cellNoItems.style.paddingLeft = '15px'; // 略微缩进
                        }
                    });
                }

                // 一般部分的渲染(例如, 补充建议, 风险控制)
                if (recommendations.general_sections && recommendations.general_sections.length > 0) {
                    recommendations.general_sections.forEach(section => {
                        const sectionHeaderRow = tableBody.insertRow();
                        const cellSectionHeader = sectionHeaderRow.insertCell();
                        cellSectionHeader.colSpan = 3;
                        cellSectionHeader.innerHTML = `<strong>${section.title || '补充信息'}</strong>`;
                        cellSectionHeader.style.backgroundColor = '#f2f2f2';

                        const sectionDetailsRow = tableBody.insertRow();
                        const cellSpacer = sectionDetailsRow.insertCell(); cellSpacer.textContent = ''; // Spacer
                        const cellDetails = sectionDetailsRow.insertCell();
                        cellDetails.colSpan = 2;
                        cellDetails.innerHTML = section.details ? String(section.details).replace(/\\n/g, '<br>') : '无内容';
                        cellDetails.style.paddingLeft = '20px';
                    });
                }

            } else {
                const row = tableBody.insertRow();
                const cell = row.insertCell();
                cell.colSpan = 3;
                cell.textContent = '未能加载或解析广告投放建议书内容。';
                cell.style.textAlign = 'center';
            }
        }

    </script>

    <!-- 外部主逻辑脚本，负责处理"开始生成方案"等其他按钮的逻辑 -->
    <script src="static/js/main.js"></script>
    <script>
        $(document).ready(function() { 
            //如果 Prism 的自动加载器尚未处理语法高亮问题，则初始化 Prism 以进行语法高亮处理
            // 如果代码块是动态添加的，并且没有被Prism的自动加载器处理，你可能需要：
            // Prism.highlightAll(); 
            // 或者针对特定元素：Prism.highlightElement(element);

            // 确保hljs (Highlight.js)也被初始化，如果它仍然被用于某些部分。
            // 如果只使用Prism，可以删除此行。
            if (typeof hljs !== 'undefined') {
                 hljs.initHighlightingOnLoad(); 
            }
        });
    </script>
</body>

</html>
